<template>
    <codemirror ref="mycodemirror" v-model="code" :options="cmOptions"></codemirror>
</template>

<script>

//vue-codemirror相关
import { codemirror } from "vue-codemirror";
import "@/components/codeMirror/index.js";
import "@/components/codeMirror/myCodeMirror.css";

export default {
    components: {
        codemirror
    },
    data() {
        return {
            code: '',
            cmOptions: {
                mode: "htmlmixed",
                lineNumbers: true, //行号
                // scrollbarStyle: "simple",
                autoCloseBrackets: true, //自动补全括号
                matchBrackets: true, //匹配括号
                showCursorWhenSelecting: true, //select显示光标
                autoCloseTags: true,
                tabSize: 2,
                foldGutter: true, //可折叠的块
                theme: 'dracula',
                gutters: [
                    "CodeMirror-linenumbers",
                    "CodeMirror-foldgutter",
                    "CodeMirror-lint-markers"
                ],
                autofocus: true,
                styleActiveLine: true,
                hintOptions: {
                    completeSingle: false
                },
                keyMap: "sublime",
                extraKeys: {
                    "Ctrl-Q": "autocomplete"
                },
                onCmReady: '',
            }
        }
    },
    methods: {
        getCode() {
            return this.code;
        },
        setCode(code) {
            this.code = code;
        }
    },
}
</script>

<style>
</style>